<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>留言-闲言轻博客</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
	<link rel="stylesheet" th:href="@{/css/mian.css}">
</head>
<body class="lay-blog">
		<!--引入header-->
		<div th:replace="/include/header::header"></div>
		<div class="container-wrap">
		<!--layui的面包屑-->
			<div class="wrap_breadcrumb">
				<span class="layui-breadcrumb">
				  <a href="/index" class="layui-breadcrumb_title">博客</a>
				  <a href="">留言</a>
				</span>
				<hr/>
			</div>
		<!--layui的面包屑-->
			<div class="container container-message">
				<div class="contar-wrap" id="contar-wrap">

					<div class="message_head">
							<div class="message_head_title">
								<h1 class="entry-title">给我留言</h1>
							</div>
							<p style="text-align: center; padding-left: 30px;line-height: 39px;">
									<span style="color: #679907;"><strong>
									<span style="font-size: large;"><br>请在这里留下您的急切的需求或宝贵的意见,<br>
									</span></strong><strong><span style="font-size: large;">比如软件需求、脚本需求以及其他求助等等;<br></span></strong>
									<strong><span style="font-size: large;">衷心希望各位在张戈的博客找到有用的经验。<br></span>
									<span style="font-size: large;color:#FF5722">(console.log("开启你的花式留言吧!"))<br></span>
									</strong></span><a href="//zhangge.net/pay/" target="_blank"><br></a>
							</p>
							<img th:src="@{images/wrong.gif}" alt="" class="message_worong">
							<img th:src="@{images/wrong.gif}" alt="" class="message_worong1">
					</div>
					<!-- 评论留言板-->
						     <textarea id="LAY-msg-content" style="display: none;"></textarea>
		
					<!-- 评论留言板-->
					<div class="item-btn">
						<button class="layui-btn layui-btn-normal message_submit_btn" id="item-btn">提交评论</button>
					</div>
					
					<!--留言内容-->
					<div id="LAY-msg-box" th:each="art:${page.list}">
						<div class="info-box">
							<div class="info-item">
								<img class="info-img avatarUrl" th:src="${art.avatar}" alt="">
								<div class="info-text">
									<p class="title count">
										<span class="name" th:text="${art.nickname}"></span>
										<span class="info-img like" th:onclick="'javascript:check('+${art.id}+','+${art.likeNum}+')'"><i class="layui-icon layui-icon-praise"></i><like th:id="'a'+${art.id}" th:text="${art.likeNum}"></like></span>
									</p>
									<p class="info-intr" th:utext="${art.context}"></p>
								</div>
							</div>
						</div>
					</div>
					<!--留言内容-->

					<div id="page1" class="paging"></div>

				</div>
			</div>
			
			<div class="container_right">
					<!-- 自我介紹-->
					<div th:replace="/include/Mydes::Mydes"></div>
					<!-- 自我介紹-->
					<!--tag -->
					<div th:replace="/include/tag::tag"></div>
					<!--tag -->
					<!--文章列表分类-->
					<div th:replace="/include/typeTab::typeTab"></div>
					<!--文章列表分类-->
				</div>
		</div>
		<!--footer-->
		<div th:replace="/include/footer::footer"></div>
		<!--footer-->

	
	<div id="messageBody" class="messageBody" style="display:none;">
			<form class="layui-form layui-form-pane" id="messageform">
			<div class="layui-form-item">
				<label class="layui-form-label"><i class="layui-icon messageBody_icon">&#xe676;</i>QQ</label>
				<div class="layui-input-block">
				  <input type="text" id="qq" autocomplete="off" placeholder="选填" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><i class="layui-icon messageBody_icon">&#xe66f;</i>昵称</label>
				<div class="layui-input-block">
				  <input type="text" id="nickname" autocomplete="off" class="layui-input" value="匿名">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><i class="layui-icon messageBody_icon">&#xe672;</i>邮箱</label>
				<div class="layui-input-block">
				  <input type="text" id="eamil" autocomplete="off" placeholder="选填" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><i class="layui-icon messageBody_icon">&#xe7ae;</i>网址</label>
				<div class="layui-input-block">
				  <input type="text" id="url" autocomplete="off" placeholder="选填" class="layui-input">
				</div>
			</div>
				<a href="javascript:void(0);" class="layui-btn layui-btn-primary" id="message_btn"><i class="layui-icon messageBody_icon">&#xe6af;</i>提交评论</a>

			</form>
			
	</div>

	<script th:src="@{/layui/layui.js}"></script>
	<script th:src="@{/js/blog.js}"></script>
	<script id="LAY-msg-tpl" type="text/html">
		<div class="info-box">
			<div class="info-item">
				<img class="info-img avatarUrl" src="{{ d.avatar }}" alt="">
			  <div class="info-text">
					<p class="title">
					  <span class="name">{{ d.username }}</span>
					  <span class="info-img">
					  	<i class="layui-icon layui-icon-praise"></i>
					  	{{ d.praise }}
					 	</span>
					</p>
					<p class="info-intr">
						{{ d.content }}
					</p>
			  </div>
			</div>
		</div>
	</script>

		<!--分页的-->
		<script>



            layui.use(['laypage', 'layer'], function(){
                var laypage = layui.laypage
                    ,layer = layui.layer;
                //总页数低于页码总数
                laypage.render({
                    elem: 'page1'
                    ,count: [[${page.total}]] //数据总数
                    ,curr: [[${page.pageNum}]]
                    ,jump: function(obj, first){
                        if(!first){
                            layer.msg('第 '+ obj.curr +' 页');
                            window.location.href="/message?pageNum="+obj.curr;
                        }
                    }
                });
            })
		</script>

</body>
